<template>
    <div>
        <van-form ref="form">
            <van-field label="食堂列表：">
                <template #input>
                    <div class="textCon" @click="showPicker = true">
                        <span v-if="!canteenText" style="color: #aaa">请选择食堂列表</span>
                        <span v-else>{{ canteenText }}</span>
                    </div>
                </template>
            </van-field>
            <van-field name="rate" label="服务态度："  required :rules=rules.serviceAttitudeScore>
                <template #input>
                    <van-rate color="#ec9c33" v-model="formData.serviceAttitudeScore" />
                </template>
            </van-field>
            <van-field name="rate" label="环境卫生：" required :rules=rules.environmentHygieneScore>
                <template #input>
                    <van-rate color="#ec9c33" v-model="formData.environmentHygieneScore" />
                </template>
            </van-field>

            <van-field v-model="formData.scoreComment" rows="5" name="评价内容" label="评价内容" type="textarea" maxlength="512"
                placeholder="请输入评价内容" show-word-limit :rules=rules.commentContent />
            <van-field name="uploader" label="添加图片">
                <template #input>
                    <uploadCom ref="uploadRef" @uploadFileIds="uploadFileIds" :maxNumber="6"
                        accept=".jpg,.jpeg,.png,.mp4"></uploadCom>
                </template>
            </van-field>
        </van-form>
        <full-loading v-if="loading"></full-loading>
        <van-action-sheet v-model="showPicker" cancel-text="取消" :actions="canteenList" @select="onConfirm" />
    </div>
</template>

<script>
    import { getPage, editScore } from '@/api/srvAssurance/smarcatering/canteenScore';
    export default {
        data() {
            return {
                formData: {
                    scoreComment: '', // 评论内容
                    canteenId: '',
                    canteenName: '',
                    serviceAttitudeScore: 0, // 服务态度
                    environmentHygieneScore: 0, // 环境卫生
                    listFileCode: []
                },
                canteenList: [],
                showPicker: false,
                canteenText: '',
                rules: {
                    serviceAttitudeScore: [
                        { required: true, type: 'number', message: '请选择包装评分', trigger: 'onChange' }
                    ],
                    environmentHygieneScore: [
                        { required: true, type: 'number', message: '请选择餐准评分', trigger: 'onChange' }
                    ],
                    scoreComment: [
                        { pattern: this.$commonReg.textAreaReg, message: this.$commonReg.textAreaMsg, trigger: 'onBlur' }
                    ]
                },
                loading: false
            }
        },
        methods: {
            onConfirm(item) {
                this.formData.canteenId = item.canteenId;
                this.canteenText = item.canteenName;
                this.showPicker = false;
            },
            // 保存
            handleSave() {
                this.$refs.form.validate().then(() => {

                    let formData = {
                        serviceAttitudeScore: this.formData.serviceAttitudeScore || '',
                        environmentHygieneScore: this.formData.environmentHygieneScore || '',
                        canteenId:this.formData.canteenId,
                        scoreComment: this.formData.scoreComment,
                        listFileCode: this.formData.listFileCode
                        // serviceAttitudeScore: 0, // 服务态度
                        // environmentHygieneScore: 0, // 环境卫生
                        // listFileCode: []
                    }
                    this.loading = true;
                    editScore(formData).then(res => {
                        this.loading = false;
                        if (res.code === 1000) {
                            this.$Notify({ type: 'success', message: '评价成功！' });
                            this.$emit('close');
                            this.$emit('refresh');
                        }
                    }).catch(() => {
                        this.loading = false;
                    })
                })
            },
            getData() {
                this.formData.canteenId = this.canteenList[0].canteenId;
                this.canteenText = this.canteenList[0].canteenName;
            },
            // 附件上传
            uploadFileIds(arr) {
                this.formData.listFileCode = arr;
            },
            // 重置表单
            resetForm() {
                setTimeout(() => {
                    this.$refs.form.resetValidation();
                })
                this.formData = {
                    commentContent: '', // 评论内容
                    canteenId: '',
                    canteenName: '',
                    serviceAttitudeScore: 0, // 服务态度
                    environmentHygieneScore: 0, // 环境卫生
                    listFileCode: []
                }
                this.showPicker = false,
                    this.canteenText = '',
                    this.$refs.uploadRef.reset();
                this.loading = false;
            }
        }
    }
</script>

<style scoped lang='less'>
    h5 {
        font-size: 13px;
        text-indent: 1em;
        line-height: 35px;

        span {
            font-weight: normal;
            font-size: 12px;
        }
    }
</style>